<!DOCTYPE  html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Shinra</title>
		
		<!-- CSS -->
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/social-icons.css" type="text/css" media="screen" />
		<!--[if IE 8]>
			<link rel="stylesheet" type="text/css" media="screen" href="/css/ie8-hacks.css" />
		<![endif]-->
		<!-- ENDS CSS -->	

		<!-- GOOGLE FONTS -->
		<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
		
		<!-- JS -->
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
		<script type="text/javascript" src="js/quicksand.js"></script>
		<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
		<script type="text/javascript" src="js/custom.js"></script>
		<!--[if IE]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		
		<!--[if IE 6]>
			<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
			<script>
	      		/* EXAMPLE */
	      		//DD_belatedPNG.fix('*');
	    	</script>
		<![endif]-->
		<!-- ENDS JS -->
		
		
		<!-- Nivo slider -->
		<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
		<script src="js/nivo-slider/jquery.nivo.slider.js" type="text/javascript"></script>
		<!-- ENDS Nivo slider -->
		
		<!-- tabs -->
		<link rel="stylesheet" href="css/tabs.css" type="text/css" media="screen" />
		<script type="text/javascript" src="js/tabs.js"></script>
  		<!-- ENDS tabs -->
  		
  		<!-- prettyPhoto -->
		<script type="text/javascript" src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
		<link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" />
		<!-- ENDS prettyPhoto -->
		
		<!-- superfish -->
		<link rel="stylesheet" media="screen" href="css/superfish.css" /> 
		<link rel="stylesheet" media="screen" href="css/superfish-left.css" /> 
		<script type="text/javascript" src="js/superfish-1.4.8/js/hoverIntent.js"></script>
		<script type="text/javascript" src="js/superfish-1.4.8/js/superfish.js"></script>
		<script type="text/javascript" src="js/superfish-1.4.8/js/supersubs.js"></script>
		<!-- ENDS superfish -->
		
		<!-- poshytip -->
		<link rel="stylesheet" href="js/poshytip-1.0/src/tip-twitter/tip-twitter.css" type="text/css" />
		<link rel="stylesheet" href="js/poshytip-1.0/src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
		<script type="text/javascript" src="js/poshytip-1.0/src/jquery.poshytip.min.js"></script>
		<!-- ENDS poshytip -->
		
		<!-- Tweet -->
		<link rel="stylesheet" href="css/jquery.tweet.css" media="all"  type="text/css"/> 
		<script src="js/tweet/jquery.tweet.js" type="text/javascript"></script> 
		<!-- ENDS Tweet -->
		
		<!-- Fancybox -->
		<link rel="stylesheet" href="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
		<script type="text/javascript" src="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
		<!-- ENDS Fancybox -->
		
		<!-- SKIN -->
		<link rel="stylesheet" href="skins/plastic/style.css" type="text/css" media="screen" />

	</head>
	
	<body class="">
	
	
	<!-- WRAPPER -->
	<div id="wrapper">
		
		<!-- HEADER -->
		<div id="header">
			<a href="index.html"><img id="logo" src="img/logo.png" alt="Nova" /></a>
			<!-- Social -->
			<div id="social-holder">
				<ul class="social">
					<li><a href="http://www.facebook.com" class="poshytip facebook" title="Become a fan"></a></li>
					<li><a href="http://www.twitter.com" class="poshytip twitter" title="Follow our tweets"></a></li>
					<li><a href="http://www.dribbble.com" class="poshytip dribbble" title="View our work"></a></li>
					<li><a href="http://www.addthis.com" class="poshytip addthis" title="Tell everybody"></a></li>
					<li><a href="http://www.vimeo.com" class="poshytip vimeo" title="View our videos"></a></li>
					<li><a href="http://www.youtube.com" class="poshytip youtube" title="View our videos"></a></li>
				</ul>
			</div>
			<!-- ENDS Social -->
			
			<!-- Navigation -->
			<ul id="nav" class="sf-menu">
				<li><a href="index.html">HOME</a></li>
				<li  class="current-menu-item"><a href="features.html">FEATURES</a>
					<ul>
						<li><a href="features-appearance.html"><span> Appearance</span></a></li>
						<li><a href="features-columns.html"><span> Columns layout</span></a></li>
						<li><a href="features-accordion.html"><span> Accordion</span></a></li>
						<li><a href="features-toggle.html"><span> Toggle box</span></a></li>
						<li><a href="features-tabs.html"><span> Tabs</span></a></li>
						<li><a href="features-infobox.html"><span> Text box</span></a></li>
						<li><a href="features-monobox.html"><span> Icons</span></a></li>
					</ul>
				</li>
				<li><a href="blog.html">BLOG</a></li>
				<li><a href="portfolio.html">PORTFOLIO</a></li>
				<li><a href="gallery.html">GALLERY</a>
					<ul>
						<li><a href="gallery.html"><span> Four columns </span></a></li>
						<li><a href="gallery-3.html"><span> Three columns </span></a></li>
						<li><a href="gallery-2.html"><span> Two columns </span></a></li>
							<li><a href="video-gallery.html"><span> Video gallery </span></a></li>
					</ul>
				</li>
				<li><a href="contact.html">CONTACT</a></li>
			</ul>
			<!-- Navigation -->	
			
			<!-- search -->
			<div class="top-search">
				<form  method="get" id="searchform" action="#">
					<div>
						<input type="text" value="Search..." name="s" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
						<input type="submit" id="searchsubmit" value=" " />
					</div>
				</form>
			</div>
			<!-- ENDS search -->
			
			<!-- Breadcrumb-->
			<div id="breadcrumbs">
				<a title="Home" href="index.html">Home</a>
				<a title="Features" href="#">Features</a> 
				Columns
			</div>
			<!-- ENDS Breadcrumb-->	

		</div>
		<!-- ENDS HEADER -->
		
		<!-- MAIN -->
		<div id="main">
			
			<!-- content -->
			<div id="content">
				
				<!-- title -->
				<div id="page-title">
					<span class="title">Features</span>
					<span class="subtitle">Donec eu libero sit amet quam egestas semper.</span>
				</div>
				<!-- ENDS title -->
				
				<!-- page-content -->
				<div id="page-content">
				
					<!-- one col -->
					<h4 class="header-line">Columns layout</h4>
					<p>Have your content well organized with the columns layout. You can have 2 columns, 3 columns, 1 third and 2 thirds layouts.</p>
					<div class="clear "></div>
					<!-- ENDS one col -->
					
					<!-- 2 cols -->
					<div class="one-half">
						<h6>One half </h6>
						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugamet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vit, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus.</p>
					</div>
					<div class="one-half last">
						<h6>One half</h6>
						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugamet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vit, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus.</p>
					</div>
					<div class="clear "></div>
					<!-- ENDS 2 cols -->
					
					<!-- 3 cols -->
					<div class="one-third">
						<h6>One third </h6>
						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus.</p>
					</div>
					<div class="one-third">
						<h6>One third </h6>
						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus.</p>
					</div>
					<div class="one-third last">
						<h6>One third </h6>
						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus.</p>
					</div>
					<div class="clear "></div>
					<!-- ENDS 3 cols -->
					
					<!-- 4 cols -->
					<div class="one-fourth">
						<h6>One fourth </h6>
						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugamet, ante. Donec eu libero sit amet quam  semper.</p>
					</div>
					<div class="one-fourth">
						<h6>One fourth </h6>
						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugamet, ante. Donec eu libero sit amet quam  semper.</p>
					</div>
					<div class="one-fourth">
						<h6>One fourth </h6>
						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugamet, ante. Donec eu libero sit amet quam  semper.</p>
					</div>
					<div class="one-fourth last">
						<h6>One fourth</h6>
						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugamet, ante. Donec eu libero sit amet quam  semper.</p>
					</div>
					<div class="clear "></div>
					<!-- ENDS 4 cols -->
					
					<!-- 2/3 cols -->
					<div class="one-third">
						<h6>One third </h6>
						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus.</p>
					</div>
					<div class="two-third last">
						<h6>Two thirds</h6>
						<p>Pellentesque vit habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat Aenean fermentum, it sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. vit Aenean fermentum, Aenean fermentum, Aenean fermentum, Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus.</p>
					</div>
					<div class="clear "></div>
					<!-- ENDS 2/3 cols -->
					
					<!-- 1/4 cols -->
					
					<div class="three-fourth ">
						<h6>Three fourths</h6>
						<p>Pellentesque vit habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat Aenean fermentum, it sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. vit Aenean fermentum, Aenean fermentum, Aenean fermentum, Aenean fermentum, elit eget tincidunt condimentum,  sagittis tempus.</p>
					</div>
					<div class="one-fourth last">
						<h6>One fourth </h6>
						<p>Pellentesque habitant morbi tristique et malesuada fames ac turpis egestas. Vestibulum tortorsagittis tempus.</p>
					</div>
					<div class="clear "></div>
					<!-- ENDS 1/4 cols -->

				</div>
				<!-- ENDS page-content -->

			</div>
			<!-- ENDS content -->
			
			<!-- Twitter -->
			<div id="twitter">
				<a href="#" id="prev-tweet"></a>
				<a href="#" id="next-tweet"></a>
				<div id="tweets">
					<ul class="tweet_list"></ul>
				</div>
			</div>
			<!-- ENDS Twitter -->


		</div>
		<!-- ENDS MAIN -->
		
		<!-- FOOTER -->
		<div id="footer">
			
			<!-- footer-cols -->
			<ul id="footer-cols">
				<li class="col">
					<h6>About the theme</h6>
					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
				</li>
				<li class="col">
					<h6>Categories</h6>
					<ul>
						<li><a href="#">Webdesign</a></li>
						<li><a href="#/">Wordpress</a></li>
						<li><a href="#">Photo</a></li>
						<li><a href="#">Code</a></li>
						<li><a href="#">Web design</a></li>
						<li><a href="#/">Marketplace</a></li>
						<li><a href="#">Writting</a></li>
						<li><a href="#">Drawings</a></li>
					</ul>
				</li>
				<li class="col">
					<h6>Categories</h6>
					<ul>
						<li><a href="#">Webdesign</a></li>
						<li><a href="#/">Wordpress</a></li>
						<li><a href="#">Photo</a></li>
						<li><a href="#">Code</a></li>
						<li><a href="#">Web design</a></li>
						<li><a href="#/">Marketplace</a></li>
						<li><a href="#">Writting</a></li>
						<li><a href="#">Drawings</a></li>
					</ul>
				</li>
			</ul>
			<!-- ENDS footer-cols -->
			
			<!-- Bottom -->
			<div id="bottom">
				2011 <a href="http://www.luiszuno.com"> Luiszuno</a> all rights reserved
				
				<div id="to-top" class="poshytip" title="To top"></div>
				
			</div>
			<!-- ENDS Bottom -->
		</div>
		<!-- ENDS FOOTER -->
	
	</div>
	<!-- ENDS WRAPPER -->
	
	</body>
	
</html>